<template>
  <div style="width: 600px">
    <LikeDog1
      v-for="(itme, index) in arr"
      :key="index"
      :dogImgUrl="itme.dogImgUrl"
      :dogName="itme.dogName"
      @sonDogName="sonDogName"
    ></LikeDog1>
    <ul>
      <li v-for="(itme, index) in err" :key="index">{{ itme }}</li>
      <!-- <div></div> -->
    </ul>
    <hr />
    <BuyOut :goodsArr="goodsArr" @butchange="butchange"></BuyOut>
    <h3>ALL Number:{{ sum }}</h3>
    <hr />
    <LikeEat :eatArr="eatArr" @add="add" @del="del"></LikeEat>
    <hr />

    <template>
      <div>
        <table border="1" width="700" style="border-collapse: collapse">
          <caption>
            购物车
          </caption>
          <thead>
            <tr>
              <th>
                <input
                  type="checkbox"
                  :checked="checkeds"
                  @change="checkeds = !checkeds"
                />
                <span>全选</span>
              </th>
              <th>名称</th>
              <th>价格</th>
              <th>数量</th>
              <th>总价</th>
              <th>操作</th>
            </tr>
          </thead>

          <ShoppingCart
            :goodList="goodList"
            @add="addSc"
            @red="redSc"
            @del="delSc"
            @ck="ckSc"
          ></ShoppingCart>

          <tfoot>
            <tr>
              <td>合计:</td>
              <td colspan="5">{{ sx() }}元</td>
            </tr>
          </tfoot>
        </table>
      </div>
    </template>
  </div>
</template>

<script>
import LikeDog1 from "@/components/LikeDog1.vue";
import BuyOut from "@/components/BuyOut.vue";
import LikeEat from "@/components/LikeEat.vue";
import ShoppingCart from "@/components/ShoppingCart.vue";
export default {
  // name: "",
  components: {
    LikeDog1,
    BuyOut,
    LikeEat,
    ShoppingCart,
  },
  props: {},
  data() {
    return {
      arr: [
        {
          dogImgUrl:
            "http://nwzimg.wezhan.cn/contents/sitefiles2029/10146688/images/21129958.jpg",
          dogName: "博美",
        },
        {
          dogImgUrl:
            "https://pic1.zhimg.com/80/v2-7ba4342e6fedb9c5f3726eb0888867da_1440w.jpg?source=1940ef5c",
          dogName: "泰迪",
        },
        {
          dogImgUrl:
            "https://nwzimg.wezhan.cn/contents/sitefiles2029/10146688/images/21129958.jpg",
          dogName: "金毛",
        },
        {
          dogImgUrl:
            "https://pic1.zhimg.com/80/v2-7ba4342e6fedb9c5f3726eb0888867da_1440w.jpg?source=1940ef5c",
          dogName: "哈士奇",
        },
        {
          dogImgUrl:
            "https://nwzimg.wezhan.cn/contents/sitefiles2029/10146688/images/21129958.jpg",
          dogName: "阿拉斯加",
        },
        {
          dogImgUrl:
            "https://pic1.zhimg.com/80/v2-7ba4342e6fedb9c5f3726eb0888867da_1440w.jpg?source=1940ef5c",
          dogName: "萨摩耶",
        },
      ],
      err: [],
      goodsArr: [
        {
          count: 0,
          goodsName: "Watermelon",
        },
        {
          count: 0,
          goodsName: "Banana",
        },
        {
          count: 0,
          goodsName: "Orange",
        },
        {
          count: 0,
          goodsName: "Pineapple",
        },
        {
          count: 0,
          goodsName: "Strawberry",
        },
      ],
      eatArr: [
        {
          shopName: "可比克薯片",
          price: 5.5,
          count: 0,
        },
        {
          shopName: "草莓酱",
          price: 3.5,
          count: 0,
        },
        {
          shopName: "红烧肉",
          price: 55,
          count: 0,
        },
        {
          shopName: "方便面",
          price: 12,
          count: 0,
        },
      ],
      goodList: [
        {
          name: "诸葛亮",
          price: 1000,
          num: 1,
          checked: false,
        },
        {
          name: "蔡文姬",
          price: 1500,
          num: 1,
          checked: false,
        },
        {
          name: "妲己",
          price: 2000,
          num: 1,
          checked: false,
        },
        {
          name: "鲁班",
          price: 2200,
          num: 1,
          checked: false,
        },
      ],
    };
  },
  methods: {
    sx() {
      if (this.goodList.findIndex((itme) => itme.checked === true) === -1) {
        return 0;
      } else {
        const arr = JSON.parse(JSON.stringify(this.goodList));
        const err = [];
        for (let i = 0; i < this.goodList.length; i++) {
          const indx = arr.findIndex((itme) => itme.checked === true);
          if (indx === -1) {
            continue;
          } else {
            const obj = {};
            obj.num = arr[indx].num;
            obj.price = arr[indx].price;
            err.push(obj);
            arr[indx].checked = false;
          }
        }
        return err.reduce((sm, itme) => itme.num * itme.price + sm, 0);
        // return err;
      }
    },
    sonDogName(value) {
      this.err.push(value);
    },
    butchange(value) {
      this.goodsArr[value[0]].count = value[1] <= 0 ? 0 : +value[1];
    },
    add(value) {
      this.eatArr[value[0]].count = value[1];
    },
    del(value) {
      this.eatArr[value[0]].count = value[1];
    },
    addSc(value) {
      this.goodList[value].num++;
    },
    redSc(value) {
      if (this.goodList[value].num > 0) {
        this.goodList[value].num--;
      } else {
        this.goodList[value].num = 0;
      }
    },
    delSc(value) {
      this.goodList.splice(value, 1);
    },
    ckSc(value) {
      this.goodList[value].checked = !this.goodList[value].checked;
    },
    fn() {
      console.log((this.checkeds = !this.checkeds));
    },
  },
  computed: {
    sum() {
      return this.goodsArr.reduce((sm, itme) => itme.count + sm, 0);
    },
    sumSc() {
      return this.goodList.reduce((sm, itme) => itme.price * itme.num + sm, 0);
      // return this.goodList.reduce((sm, itme) => {
      //   if (itme.checked === true) {
      //     return itme.price * itme.num + sm;
      //   } else {
      //     return 0;
      //   }
      // }, 0);
    },
    checkeds: {
      get() {
        return this.goodList.every((itme) => itme.checked === true);
      },
      set(value) {
        this.goodList.forEach((itme) => (itme.checked = value));
      },
    },
  },
  watch: {
    goodList: {
      deep: true,
      immediate: true,
      handler() {
        this.sx();
      },
    },
  },
  created() {},
};
</script>

<style scoped>
* {
  box-sizing: border-box;
}
</style>
